<script setup lang="ts">
import { computed } from "vue";
interface Props {
  modelValue?: string;
  type?: "text" | "number" | "idcard" | "digit" | "tel" | "safe-password" | "name";
  textContentType?: "oneTimeCode";
  password?: boolean;
  placeholder?: string;
  placeholderStyle?: string;
  placeholderClass?: string;
  disabled?: boolean;
  maxlength?: number;
  cursorSpacing?: number;
  focus?: boolean;
  confirmType?: "send" | "search" | "next" | "go" | "done";
  confirmHold?: boolean;
  cursor?: number;
  cursorColor?: string;
  selectionStart?: number;
  selectionEnd?: number;
  adjustPosition?: boolean;
  autoBlur?: boolean;
  ignoreCompositionEvent?: boolean;
  alwaysEmbed?: boolean;
  holdKeyboard?: boolean;
  safePasswordCertPath?: string;
  safePasswordLength?: number;
  safePasswordTimeStamp?: number;
  safePasswordNonce?: string;
  safePasswordSalt?: string;
  safePasswordCustomHash?: string;
  randomNumber?: boolean;
  controlled?: boolean;
  alwaysSystem?: boolean;
  inputmode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
}
const
  props = withDefaults(defineProps<Props>(), {
    modelValue: "", maxlength: 140,
  }),
  emit = defineEmits<{
    (e: "update:modelValue", v: string): void;
    (e: "input", ...v: any): void;
    (e: "focus", ...v: any): void;
    (e: "blur", ...v: any): void;
    (e: "confirm", ...v: any): void;
    (e: "keyboardheightchange", ...v: any): void;
  }>(),
  data = computed({
    get: () => props.modelValue,
    set(val) { emit("update:modelValue", val); }
  });

function eInput(...v: any) { emit("input", ...v); }
function eFocus(...v: any) { emit("focus", ...v); }
function eBlur(...v: any) { emit("blur", ...v); }
function eConfirm(...v: any) { emit("confirm", ...v); }
function eKeyboardheightchange(...v: any) { emit("keyboardheightchange", ...v); }

</script>
<template>
  <div class="m-input p04em">
    <input class="whf xcc" :type="type" :textContentType="textContentType" :password="password"
      :placeholder="placeholder" :placeholderStyle="placeholderStyle" :placeholderClass="placeholderClass"
      :disabled="disabled" :maxlength="maxlength" :cursorSpacing="cursorSpacing" :focus="focus"
      :confirmType="confirmType" :confirmHold="confirmHold" :cursor="cursor" :cursorColor="cursorColor"
      :selectionStart="selectionStart" :selectionEnd="selectionEnd" :adjustPosition="adjustPosition"
      :autoBlur="autoBlur" :ignoreCompositionEvent="ignoreCompositionEvent" :alwaysEmbed="alwaysEmbed"
      :holdKeyboard="holdKeyboard" :safePasswordCertPath="safePasswordCertPath" :safePasswordLength="safePasswordLength"
      :safePasswordTimeStamp="safePasswordTimeStamp" :safePasswordNonce="safePasswordNonce"
      :safePasswordSalt="safePasswordSalt" :safePasswordCustomHash="safePasswordCustomHash" :randomNumber="randomNumber"
      :controlled="controlled" :alwaysSystem="alwaysSystem" :inputmode="inputmode" v-model="data" @input="eInput"
      @focus="eFocus" @blur="eBlur" @confirm="eConfirm" @keyboardheightchange="eKeyboardheightchange" />
  </div>
</template>
<style lang="scss" scoped>
.m-input {
  position: relative;
  background-color: #eee;
  border-radius: 0.4em;
}
</style>